<template>
  <section class="user-list">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="编号">
        <el-input v-model="searchForm.id" placeholder="请输入编号"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="username" label="登录账号"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageCurrent"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 编辑/添加对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="ID" prop="id" v-if="dialogType === 'edit'">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="username">
          <el-input v-model="form.username" placeholder="请输入登录账号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
  name: 'UserList',
  data() {
    return {
      searchForm: {
        id: '',
        username: ''
      },
      tableData: [],
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      dialogType: 'add', // add 或 edit
      dialogTitle: '添加用户',
      form: {
        id: '',
        username: ''
      },
      rules: {
        id: [
          { required: true, message: 'id不能为空', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 查询列表
    fetchList() {
      this.$axios.post('/user/list', {
        pageCurrent: this.pageCurrent,
        pageSize: this.pageSize,
        id: this.searchForm.id || null,        // 如果为空则传null
        username: this.searchForm.username || '' // 如果为空则传空字符串
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    
    // 搜索
    handleSearch() {
      this.pageCurrent = 1
      this.fetchList()
    },
    
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        id: '',
        username: ''
      }
      this.handleSearch()
    },
    
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchList()
    },
    
    // 当前页改变
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.fetchList()
    },
    
    // 编辑
    handleEdit(row) {
      this.dialogType = 'edit'
      this.dialogTitle = '编辑用户'
      this.form = {...row}
      this.dialogVisible = true
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.dialogType === 'add' ? '/user/add' : '/user/update'
          this.$axios.post(url, this.form).then(res => {
            if (res.code === 200) {
              this.$message.success(`${this.dialogType === 'add' ? '添加' : '更新'}成功`)
              this.dialogVisible = false
              this.fetchList()
            }
          })
        }
      })
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

<style lang="less" scoped>
.user-list {
  padding: 20px;
  
  .search-form {
    margin-bottom: 20px;
  }
  
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style> 